<template>
  <div class="siteEcharts">
    <div id="siteEcharts" style="width: 100%;height:300px;margin-top: 10px;"></div>
  </div>
</template>

<script>
  export default {
    props: ["echartsData","activeName"],
    data(){
      return {
        title:"",
        axisName:"",
//        echartsData: [["1", "2","3","4","5","6","7","8","9","10"], [920, 230,3058,1258,862,158,251,168,58,10]],
      }
    },
    mounted(){
      this.$nextTick(()=>{
        this.initData()
      })
      //自适应
      window.addEventListener("resize", () => {
        this.myChartBy.resize();
      });
    },

    created(){
    },
    methods: {

      initData(){
        this.title=this.activeName=="first"?"可疑订单":"可疑车辆"
        this.axisName=this.activeName=="first"?"数量（单）":"数量（辆）"
        if (this.myChartBy != null && this.myChartBy != "" && this.myChartBy != undefined) {
          this.myChartBy.dispose();
        }
        this.myChartBy = this.echarts.init(document.getElementById('siteEcharts'))
        const colors = ['#FE8762', "#F8CBBD"]
        const option = {
          color: colors,
          title: {
            text: this.title+' [5,10]',
            subtext: '',
            x: 'center',
            textStyle: {
              fontSize: 18,
              fontWeight: 'bolder',
              color: '#3f51b5'          // 主标题文字颜色
            },
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '1%',
            right: '1%',
            bottom: '1%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: this.echartsData[0],
              axisTick: {
                alignWithLabel: true
              },
              axisLabel:{
                interval: 0
              },
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: 'gray'
              },
              axisLine: {
                lineStyle: {
                  color: 'gray',
                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              name: this.axisName,
              min: 0,
              textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: 'gray'
              },
              axisLine: {
                lineStyle: {
                  color: 'gray'
                }
              }
            }
          ],
          series: [
            {
              name: this.title,
              type: 'bar',
              barMaxWidth: '20px',
              symbol: 'rect',
              itemStyle: {
                normal: {
                  color: '#FE8762',
                  barBorderRadius:5,
                }
              },
              symbolRepeat: true,
              data: this.echartsData[1],
            },
          ]
        };
        this.myChartBy.setOption(option);

      }
    },
    watch: {
      echartsData(){
        this.initData()
      },
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .siteEcharts
    height 100%
    width: 100%
    margin 0 auto
    border-radius 15px
    display: flex
    justify-content: center

</style>
